<template>
    <div>
        <div class="card">
            <form>
                <div class="row">
                    <text class="header">收货人</text>
                    <div class="greyCard">
                        <input v-model="addressDetail.name" placeholder="名字" />
                    </div>
                </div>
                <div style="height: 10px"></div>
                <div class="row">
                    <text class="header">手机号</text>
                    <div class="greyCard">
                        <input v-model="addressDetail.telephone" placeholder="手机号" />
                    </div>
                </div>
                <div style="height: 10px"></div>

                <div class="row">
                    <text class="header">所在地区</text>
                    <div class="greyCard">
                        <div class="row" style="justify-content: space-between">
                            <input
                                disabled
                                :placeholder="
                                    addressDetail.provinceName +
                                        addressDetail.cityName +
                                        addressDetail.areaName +
                                        addressDetail.streetName ||
                                    '' ||
                                    '省、市、区、街道'
                                "
                            />
                            <text style="color: grey">＞</text>
                        </div>
                    </div>
                </div>
                <div style="height: 10px"></div>

                <div class="row">
                    <text class="header">详细地址</text>
                    <div class="greyCard">
                        <input v-model="addressDetail.address" placeholder="详细地址" />
                    </div>
                </div>
                <div style="height: 10px"></div>

                <div class="row" style="justify-content: space-between">
                    <text class="header" style="width: 200px">设为默认地址</text>
                    <switch
                        :checked="addressDetail.isDefault === 1"
                        @change="handleSwitch"
                    ></switch>
                </div>
            </form>
        </div>
        <div class="bottom">
            <div class="submit" @click="submit">保存</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import { ref } from 'vue'
import request from '@/utils/request'

let params = {}
const { windowWidth } = uni.getSystemInfoSync()
const addressDetail = ref({})
onLoad((e) => {
    params = e
    const addressId = e.id
    if (addressId) {
        request.get(`/wl-portal/portal/address/info/${addressId}`).then((res) => {
            console.log(res)
            addressDetail.value = res.data
        })
    }
})

function handleSwitch(e) {
    addressDetail.value.isDefault = e.detail.value ? 1 : 0
    console.log('handleSwitch', addressDetail.value.isDefault)
}
function submit() {
    uni.showLoading({
        title: '保存中...'
    })
    var future
    //更新
    if (!params.id) {
        future = request.post('/wl-portal/portal/address/save', addressDetail.value)
    } else {
        future = request.put('/wl-portal/portal/address/update', addressDetail.value)
    }
    future.then((res) => {
        uni.hideLoading()
        if (res.code == '200') {
            uni.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 2000
            })
        } else {
            uni.showModal({
                title: '提示',
                content: res.msg,
                showCancel: false
            })
        }
    })
}
onPullDownRefresh(() => {})
</script>

<style scoped lang="scss">
.bottom {
    position: fixed;
    bottom: calc(var(--window-bottom));
    z-index: 1030;
    margin-bottom: 20px;
    justify-content: center;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
}
.submit {
    background-color: #ec6a2c;
    border-radius: 999px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: center;
}
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.card {
    border-radius: 16px;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
}
.header {
    font-family: PingFang SC;
    font-size: 13px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: left;
    color: black;
    width: 74px;
}
.placeHolder {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: center;
}

.greyCard {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background-color: #fafafa;
    flex-grow: 1;
}
</style>
